<template>
  <div>
    <h1>物证列表</h1>
    <el-alert
      v-if="del_success===1"
      title="删除成功"
      type="success">
    </el-alert>
    <div>
      <el-row :gutter="20">
        <el-col :span="18"><div>
          <el-radio-group v-model="radio1">
            <el-radio-button label="物证描述"></el-radio-button>
          </el-radio-group>
        </div></el-col>
        <el-col :span="2"><div>
          <el-button type="text" @click="this.addEvidence">添加物证</el-button>
        </div></el-col>
        <el-col :span="2"><div>
          <el-button type="text" @click="this.selectinfo">清空检索</el-button>
        </div></el-col>
      </el-row>
    </div>
    <el-input v-model="userinfo" placeholder="请输入信息"></el-input>
    <el-button type="primary"
               style="width: 100%;margin-top: 20px; margin-bottom: 30px; border-radius:0px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
               class="el-icon-search" @click="select">检索</el-button>
    <el-table

      :data="info1"
      height="360"
      border
      style="width: 100%">
      <el-table-column
        prop="wid"
        label="物证编号"
        align="center"
        width="100"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="uid"
        label="提交者编号"
        align="center"
        width="100"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="wtext"
        label="物证描述"
        align="center"
        width="400"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="state"
        label="物证状态"
        align="center"
        width="200"
        :resizable="false">
      </el-table-column>
      <el-table-column
        prop="insertdate"
        label="提交日期"
        align="center"
        width="300"
        :resizable="false">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "UserList" ,
  data(){
    return {
      id: '',
      radio1: '物证描述',
      userinfo: '',
      del_success:'',
      info:[],
      info1:[],
      currentPage: 1,
      pageSize: 2,
      totalItems: 0,
      filterTableDataEnd:[],
      flag:false,
      num:0
    }
  },
  created() {
    if (this.totalItems > this.pageSize) {
      for (let index = 0; index < this.pageSize; index++) {
        this.info1.push(this.info[index]);
      }
    } else {
      this.info1 = this.info;
    }
  },
  beforeRouteEnter: (to,from,next) => {
    console.log('进入路由之前');//加载数据
    next(vm => {
      vm.selectinfo();
    })
  },
  beforeRouteLeave: (to,from,next) => {
    console.log('进入路由之后');
    next()
  },
  methods:{
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      //需要判断是否检索
      if (!this.flag) {
        this.currentChangePage(this.info);
        console.log(this.info1);
      } else {
        this.currentChangePage(this.filterTableDataEnd);
        console.log(this.info1);
      }
    },
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.pageSize;
      let to = this.currentPage * this.pageSize;
      this.info1 = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.info1.push(list[from]);
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    addEvidence : function (){
      this.$router.push('/CaddEvidence');
    },
    selectinfo: function() {
      this.axios({
        method:"post",
        headers: { 'content-type': 'application/json' },
        url: "http://evidence.frogking.cn/evidenceUser/selectByUid",
        params:{
          token:localStorage.getItem("token_only")
        }
      }).then(res=>{
        console.log(res)
        if(res["data"]["code"]==='406'){
          this.info=res["data"]["item"];
          this.totalItems = this.info.length;
          this.info1=[];
          for(let index=0;index< this.pageSize;index++){
            this.info1.push(this.info[index])
          }
          this.userinfo='';
          console.log(res)
        }
        else if(res["data"]["code"]==='408'){
          this.$alert('您未提交过物证。', '错误提示', {
            confirmButtonText: '确定'
          });
        }
        else if(res["data"]["code"]==='000'){
          this.$alert('token失效', '错误提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push("/login");
              localStorage.removeItem("token_only");
            }
          });
        }
        else if(res["data"]["code"]==='001'){
          this.$alert('身份不满足，禁止操作', '错误提示', {
            confirmButtonText: '确定'
          });
        }
        else if(res["data"]["code"]==='002'){
          this.$alert('权限不满足，禁止操作', '错误提示', {
            confirmButtonText: '确定'
          });
        }
      }).catch(function (error) {
        console.log(error);
      });
    },
    select:function (){
      if(this.radio1==='物证描述'){
        this.axios({
          method:"post",
          headers: { 'content-type': 'application/json' },
          url: "http://evidence.frogking.cn/evidenceUser/selectByText",
          params:{
            token:localStorage.getItem("token_only"),
            text:this.userinfo
          }
        }).then(res=>{
          console.log(localStorage.getItem("token_only"))
          console.log(res+this.userinfo)
          if(res["data"]["code"]==='406'){
            this.info=res["data"]["item"];
            this.totalItems = this.info.length;
            this.info1=this.info;
            //console.log(this.info1)
          }
          else if(res["data"]["code"]==='408'){
            this.$alert('该物证不存在', '错误提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.userinfo="";
              }
            });
          }
          else if(res["data"]["code"]==='000'){
            this.$alert('登录失效，请重新登录', '错误提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push("/login");
              }
            });
          }
          else if(res["data"]["code"]==='001'){
            this.$alert('身份不满足，操作不被允许。', '错误提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.userinfo='';
              }
            });
          }
          else if(res["data"]["code"]==='002'){
            this.$alert('权限不满足，操作不被允许。', '错误提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.userinfo='';
              }
            });
          }
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }
}
</script>

<style scoped>
</style>
